<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!doctype html>
<html style="height:100%">
<head >
<meta charset="utf-8">
<title>创建账户</title>
<link media="all" href="${ctx}/css/box.css" rel="stylesheet">
<link media="all" href="${ctx}/css/style.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="${ctx}/js/scrollable.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/js/formValidate.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/js/registerValidate.js" charset="utf-8"></script>
</head>

<body style="height:100%">
<div class="head">
    <div>| 注册</div>
</div>
<div class="ui-box-content" id="wizard" >
    <ol class="ui-step ui-step-4">  
	    <li class="ui-step-start ui-step-active">
	        <div class="ui-step-line">-</div>
	        <div class="ui-step-icon">
	            <i class="iconfont">&#xf02f;</i>
	            <i class="ui-step-number">1</i>
	            <span class="ui-step-text">创建账户</span>
	        </div>
	    </li>
	    <li class="">
	        <div class="ui-step-line">-</div>
	        <div class="ui-step-icon">
	            <i class="iconfont">&#xf02f;</i>
	            <i class="ui-step-number">2</i>
	            <span class="ui-step-text">身份信息</span>
	        </div>
	    </li>
	    <li class="">
	        <div class="ui-step-line">-</div>
	        <div class="ui-step-icon">
	            <i class="iconfont">&#xf02f;</i>
	            <i class="ui-step-number">3</i>
	            <span class="ui-step-text">支付信息</span>
	        </div>
	    </li>
	    <li class="ui-step-end">
	        <div class="ui-step-line">-</div>    
	        <div class="ui-step-icon">
	            <i class="iconfont">&#xf02f;</i>
	            <i class="iconfont ui-step-number">&#xF029;</i>
	            <span class="ui-step-text">注册完成</span>
	        </div>
	    </li>
    </ol>
	<div class="items">
	    <form action="${ctx}/agent/regAgentUser" method="get" name="reg-submit">    
			<div id="item0" class="content">
				
				        <div class="ui-form-item">
				            <label for="" class="ui-label">账户名</label>
				            <input class="ui-input" id="agentUser" name="agentUser" type="text" placeholder="用户名由6-14位数字/字母构成">
				             
				            <div class="ui-tiptext-container fn-hide"> </div>
				        </div>
				
				       <div class="ui-form-item">
				            <label for="" class="ui-label">密码</label>
				            <input class="ui-input"  id="password" name="password" type="password">
				             
				            <div class="ui-tiptext-container fn-hide"> </div>
				        </div>
				        <div class="ui-form-item">
	                        <label for="" class="ui-label">确认密码</label>
	                        <input class="ui-input"  id="confirmPassword" name="confirmPassword" type="password"> 
	                         
                            <div class="ui-tiptext-container fn-hide"> </div>
	                        
	                    </div>
				        <div class="ui-form-item">
				            <label for="" class="ui-label">验证码</label>
				            <input id="regRandomCode" name="regRandomCode" class="ui-input ui-input-checkcode" type="text" data-explain="请输入右图中字符，不区分大小写。" maxlength="4" autocomplete="off" value="" name="fourcode">
				            <img class="ui-checkcode-imgcode-img" align="absMiddle" alt="请输入您看到的内容" src="${ctx}/agent/regRandomCode"  title="点击刷新图片校验码" onclick="refreshCode(this);">
	 			             
                            <div class="ui-tiptext-container fn-hide"> </div>
				        </div>
				        <div class="ui-form-item">
				            <label for="test">
				                <input id="agree"  type="checkbox" >   <a>同意"服务条款"和"隐私权相关政策"</a>
				            </label>
				        </div>
				
				        <div class="ui-form-item"> 
				            <input id="item0_next_btn" type="button" disabled class="ui-button ui-button-ldisable next right"  value="下一步">
				         
				        </div>
				 
			</div>
			<div id="item1" class="content" style="display:none">
				    <div class="ui-tiptext-container ui-tiptext-container-message">
					    <p class="ui-tiptext ui-tiptext-message">
					        <i class="ui-tiptext-icon iconfont" title="提示">&#xF046;</i>
					                          为了后续流量推广金的提取，你需要填写真实的身份信息，并需要进行实名认证。
					    </p>    
					</div>
							 
					<div class="ui-form-dashed"></div>
	                <h3 class="ui-form-title"><strong>设置身份信息</strong><span class="explain"><span class="ft-orange">请务必准确填写本人的身份信息，注册后不能更改</span>，隐私信息未经本人许可严格保密</span></h3>
	                    <div class="ui-form-item">
	                        <label for="" class="ui-label">真实姓名</label>
	                        <input class="ui-input" type="text"> 
	                    </div>
	            
	                    <div class="ui-form-item">
	                        <label for="" class="ui-label">身份证号码</label>
	                        <input class="ui-input" type="text"> 
	                    </div> 
	                    <div class="ui-form-item">
	                        <input  type="button" class="ui-button ui-button-lwhite prev" value="上一步">
	                        <input  type="button" class="ui-button ui-button-lorange next right" value="下一步">
	                    </div>
	             
	        </div>
	        
	        <div id="item2" class="content" style="display:none">
	            <div class="ui-tiptext-container ui-tiptext-container-message">
	                    <p class="ui-tiptext ui-tiptext-message">
	                        <i class="ui-tiptext-icon iconfont" title="提示">&#xF046;</i>
	                                                                                您需要填写您的银行信息以便提取推广金。如果您暂时还没有银行卡，<a href="#">可以跳过此步骤</a>
	                    </p>    
	            </div>
	            <div class="ui-form-dashed"></div>
	            <h3 class="ui-form-title"><strong>设置银行卡信息</strong><span class="explain"><span class="ft-orange">请务必准确填写本人的银行卡信息</span>，隐私信息未经本人许可严格保密</span></h3>
	                 
		        <div class="ui-form-item">
		            <label for="" class="ui-label">银行卡号</label>
		            <input class="ui-input" type="text">
		            <p class="ui-form-explain"></p>
		        </div>
		
		       <div class="ui-form-item">
		            <label for="" class="ui-label">开户银行</label>
		            <input class="ui-input" type="text"> 
		        </div>
		        
		        <div class="ui-form-item">
		            <label for="" class="ui-label">真实姓名</label>
		            <input class="ui-input" type="text">
		            <p class="ui-form-explain"></p>
		        </div> 
		        <div class="ui-form-item">
		            <input type="button" class="ui-button ui-button-lwhite prev" value="上一步">
		            <input type="button" class="ui-button ui-button-lblue" value="跳   过">
	                <input type="button" class="ui-button ui-button-lorange" value="确    定">
		        </div>
		    </div>
	 </form>        
	</div>
</div>
<script type="text/javascript">
$(function() {
	var currentIndex = 0;
 
    $('.next').click(function(){
    	var index = currentIndex + 1;
        alert(index);
    	$('.ui-step li').removeClass('ui-step-active').eq(index).addClass('ui-step-active');
        $('#item' + currentIndex).hide();
        $('#item' + index).show();

    	if(index == 1){
    		
    	}
        if(index == 2){
            
        }
        if(index == 3){
            
        }
        currentIndex++;
        
    });
    $('.prev').click(function(){
        var index = currentIndex - 1;
        $('.ui-step li').removeClass('ui-step-active').eq(index).addClass('ui-step-active');
        $('#item' + currentIndex).hide();
        $('#item' + index).show();
        if(index == 0){
            
        }
        if(index == 1){
            
        }
        if(index == 2){
            
        }
        if(index == 3){
            
        }
        currentIndex--;
    });
    $('#agree').click(function(){  
    	 if ($(this).is(":checked")) { 
    		 $('#item0_next_btn').removeClass('ui-button-ldisable').addClass('ui-button-lorange').attr('disabled',false);
    	 }else{
             $('#item0_next_btn').removeClass('ui-button-lorange').addClass('ui-button-ldisable').attr('disabled',true);
    	 }

    });
    //ui-button-lorange
});
function refreshCode(obj){  
	obj.src="${ctx}/agent/regRandomCode?rnd="+Math.random();
}

var fields = {
	    'agentUser':{
	         'regexp': {
	            'require': '请填写帐号',
	            'username' : '用户名不符合规范'
	        },
	        'check':{
	        	'isExistAgentUser':'该账号已被使用',
	        },
	        'tips': '6~18个字符，可使用字母、数字、下划线，需以字母开头'
	    }, 
	    'password': {
	        'regexp': {
	            'password': '密码不符合规则',
	            'require': '请填写密码'
	        },
	        'tips': '请填写6～16位密码'
	    },
	    'confirmPassword': {
	        'regexp': {
	            'password': '请填写6～16位密码',
	            'require': '请再次确认密码'
	        },
	        'tips' : '请再次输入密码'
	    },
	    'code': {
	        'regexp': {
	            'require': '请输入验证码'
	        },
	        'tips' : '请输入验证码'
	    }
	}
	 
	var check = new formValidate(fields, 'reg-submit');
	var path = '${ctx}';
</script>
</body>
</html>
